<template>
  <div class="main">
    <div class="plan-base flex">
      <div class="info card">
        <p class="info-name font-20-B">{{ detail.name }}</p>
        <p class="info-time font-14">创建日期：{{ detail.time }}</p>
        <el-tooltip :content="detail.name" placement="top" effect="light">
          <p class="info-desc font-14 ellipsis-1">{{ detail.name }}</p>
        </el-tooltip>

      </div>
      <div class="blog card flex-between flex-column">
        <p class="blog-label font-14">红人数量</p>
        <p class="blog-value font-22-B">{{ detail.count }}</p>
      </div>
      <div class="accound card flex-between flex-column">
        <p class="accound-label font-14">共享状态</p>
        <div class="accound-btn flex flex-align-items-center font-22-B pointer" @click="collectEddInfoShow = true">
          共享<i class="iconfont icon-bianji1"></i>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="operate-top flex-between flex-align-items-center">
        <div class="platform-list flex-center flex-align-items-center">
          <div v-for="(item, index) in platformList" :key="index" class="flex flex-align-items-center pointer"
            :class="{ active: item.name === form.platform }" @click="platformChange(item.name)">
            <img :src="item.icon">
            <span class="font-12">{{ `${item.name}(${item.count})` }}</span>
          </div>
        </div>
        <div class="search">
          <el-input v-model="form.keyword" type="text" placeholder="搜索" maxlength="20" />
          <p class="pointer flex-center flex-align-items-center">
            <i class="iconfont icon-sousuo"></i>
          </p>
        </div>
      </div>
      <div class="screen flex flex-wrap">
        <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('catesShow', true)" @hide="selectShowChange('catesShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.cates.length > 0, active: selectShow.catesShow }">
              <span class="font-14">分类{{ form.cates.length > 0 ? `(${form.cates.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="cateList" :checked="form.cates" @change="e => selectChange(e, 'cates')"></checkbox-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.areas.length > 0, active: selectShow.areasShow }">
              <span class="font-14">国家{{ form.areas.length > 0 ? `(${form.areas.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="countryList" :checked="form.areas"
            @change="e => selectChange(e, 'areas')"></checkbox-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('tags', true)" @hide="selectShowChange('tags', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.tags.length > 0, active: selectShow.tagsShow }">
              <span class="font-14">标签筛选{{ form.tags.length > 0 ? `(${form.tags.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup1 :list="tagsList" :checked="form.tags" @change="e => selectChange(e, 'tags')"></checkbox-popup1>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.fans !== -1, active: form.fansShow }">
              <span class="font-14">{{ form.fans === -1 ? '粉丝量' : form.fans.toString().split('-').length > 1 ?
                form.fans : `${form.fans}以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.fansList" :checked="form.fans" minPlaceholder="最小值" maxPlaceholder="最大值"
            @change="e => selectChange(e, 'fans')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.averageViews !== -1, active: selectShow.averageViewsShow }">
              <span class="font-14">{{ form.averageViews === -1 ? '平均观看量' :
                form.averageViews.toString().split('-').length > 1 ?
                  form.averageViews : `${form.averageViews}以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageViews" :checked="form.averageViews" minPlaceholder="最小值"
            maxPlaceholder="最大值" @change="e => selectChange(e, 'averageViews')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageInteractionRateShow', true)"
          @hide="selectShowChange('averageInteractionRateShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.averageInteractionRate !== -1, active: selectShow.averageInteractionRateShow }">
              <span class="font-14">{{ form.averageInteractionRate === -1 ? '平均互动率' :
                form.averageInteractionRate.toString().split('-').length > 1 ?
                  `${form.averageInteractionRate.toString().split('-')[0]}%-${form.averageInteractionRate.toString().split('-')[1]}%`
                  : `${form.averageInteractionRate}%以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageInteractionRate" :checked="form.averageInteractionRate"
            minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
            @change="e => selectChange(e, 'averageInteractionRate')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('contactStatus', true)" @hide="selectShowChange('contactStatus', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.contactStatus.length > 0, active: selectShow.contactStatusShow }">
              <span class="font-14">联系状态{{ form.contactStatus.length > 0 ? `(${form.contactStatus.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-popup :list="contactStatusList" :checked="form.contactStatus"
            @change="e => selectChange(e, 'contactStatus')"></radio-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="118" trigger="click" :show-arrow="false"
          @show="selectShowChange('email', true)" @hide="selectShowChange('email', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.email > 0, active: selectShow.emailShow }">
              <span class="font-14">{{ form.email > 0 ? data.emailList.find(item => item.value === form.email).name
                : '是否有邮箱' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-popup :list="data.emailList" :checked="form.email" @change="e => selectChange(e, 'email')"></radio-popup>
        </el-popover>
        <div class="screen-btns flex">
          <p class="font-14 pointer" @click="clearScreen">清除</p>
          <p class="font-14 pointer">确定</p>
        </div>
      </div>
      <el-table :data="tableData" height="420" style="width: 100%;" class="table"
        @selection-change="handleSelectionChange" @row-click="tableRowHandle">
        <el-table-column type="selection" width="50" fixed="left" />
        <el-table-column label="全选" width="220" fixed="left">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center" @click="toDetail(scope.row.id)">
              <img :src="scope.row.avatar">
              <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="收藏日期" width="170" />
        <el-table-column label="所属平台" width="100">
          <template #default="scope">
            <img :src="platformImg[scope.row.platform]" class="row-img">
          </template>
        </el-table-column>
        <el-table-column prop="location" label="国家" width="100" />
        <el-table-column label="平台标签" width="220">
          <template #default="scope">
            <div v-if="scope.row.tags" class="row-tags flex">
              <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
              </p>
              <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                <template #reference>
                  <div class="row-tag flex-center flex-align-items-center">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                </template>
                <div class="item-all-tags flex flex-wrap">
                  <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                  }}
                  </p>
                </div>
              </el-popover>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column label="自定义标签" width="220">
          <template #default="scope">
            <div v-if="scope.row.tags" class="row-tags flex">
              <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
              </p>
              <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                <template #reference>
                  <div class="row-tag flex-center flex-align-items-center">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                </template>
                <div class="item-all-tags flex flex-wrap">
                  <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                  }}
                  </p>
                </div>
              </el-popover>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="凡兔评分" width="100" />
        <el-table-column prop="fans" label="粉丝量" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.fans, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="平均观看量" width="140">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="平均互动率" width="140" />
        <el-table-column prop="averageInteractionRate" label="本账号联系状态" width="150" />
        <el-table-column prop="averageInteractionRate" label="所有账号联系状态" width="150" />
      </el-table>
      <div class="pagination flex-between flex-align-items-center">
        <div class="selection flex flex-align-items-center">
          <div class="left font-14">已选中<span class="font-14">{{ tableSelect.length }}</span>项</div>
          <div v-if="tableSelect.length > 0" class="right flex">
            <p class="font-12 pointer" @click="toWriteEmail">发邮件</p>
            <p class="font-12 pointer" @click="transferFavoritesChange(1)">复制到</p>
            <p class="font-12 pointer" @click="transferFavoritesChange(2)">移动到</p>
            <p class="font-12 pointer" @click="addToPlanShow = true">添加至推广计划</p>
            <p class="font-12 pointer">移除</p>
          </div>
        </div>
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>

  <collect-edit v-if="collectEddInfoShow" :info="detail" @close="collectEddInfoShow = false"></collect-edit>

  <add-to-plan v-if="addToPlanShow" :selectList="tableSelect" @close="addToPlanShow = false"></add-to-plan>

  <transfer-favorites v-if="transferFavoritesShow" :selectList="tableSelect" :type="collectType"
    @close="transferFavoritesShow = false"></transfer-favorites>
</template>

<script setup>
import CollectEdit from './components/collectEdit.vue';
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import RadioPopup from '../../components/radioPopup.vue';
import CheckboxPopup1 from '../../components/checkboxPopup.vue';
import AddToPlan from './components/addToPlan.vue';
import TransferFavorites from './components/transferFavorites.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import data from '@/js/data.js';
import numConvert from '@/js/numConvert';
import { useRouter } from 'vue-router';

const router = useRouter();

const platformList = [
  {
    name: "YouTube",
    icon: require('../../../../assets/icon-1.png'),
    count: 0
  },
  {
    name: "TikTok",
    icon: require('../../../../assets/icon-2.png'),
    count: 0
  },
  {
    name: "Instagram",
    icon: require('../../../../assets/icon-3.png'),
    count: 0
  }
];
const contactStatusList = [
  {
    name: '本账号未联系',
    value: 1
  },
  {
    name: '本账号已联系',
    value: 2
  },
  {
    name: '所有账号未联系',
    value: 3
  },
  {
    name: '所有账号已联系',
    value: 4
  }
];

const detail = ref({
  id: 1,
  time: '2023-12-28',
  name: 'xxxx',
  color: '#ff5277',
  isOpen: true,
  count: 1
});
const addToPlanShow = ref(false);
const collectEddInfoShow = ref(false);
const transferFavoritesShow = ref(false);
const collectType = ref();
const form = ref({
  platform: 'YouTube',
  color: null,
  account: 1,
  sort: null,
  timeRange: [],
  cates: [],
  areas: [],
  fans: -1,
  averageViews: -1,
  averageInteractionRate: -1,
  contactStatus: [],
  followPerson: [],
  email: -1,
  tags: [],
  total: 100
});
const selectShow = ref({});
const tagsList = ref([
  {
    name: '游戏',
    value: 1
  },
  {
    name: '宠物',
    value: 2
  },
  {
    name: '美食',
    value: 3
  },
  {
    name: '美容',
    value: 4
  }
]);
const tableData = ref([]);
const tableSelect = ref([]);
const cateList = ref([]);
const countryList = ref([]);

const platformChange = e => {
  if (form.value.platform !== e) {
    form.value.platform = e;
  }
}
const selectChange = (e, field) => {
  form.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 清除筛选条件
const clearScreen = () => {
  const newValue = {
    platform: -1,
    cates: [],
    areas: [],
    fans: -1,
    averageViews: -1,
    averageInteractionRate: -1,
    contactStatus: [],
    cooperationStage: [],
    followPerson: [],
    email: -1
  };
  form.value = {
    ...form.value,
    ...newValue
  }
}
const handleSelectionChange = e => {
  tableSelect.value = e;
}
const transferFavoritesChange = e => {
  collectType.value = e;
  transferFavoritesShow.value = true;
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}
const tableRowHandle = row => {
  // router.push(`/blogerdetails?id=${row._source.influencer_id}`);
  router.push(`/blogerdetails?id=1`);
}
const toDetail = id => {
  router.push(`/kocNewDetail?id=${id}`);
}
const toWriteEmail = () => {
  let ids = [], names = [];
  tableSelect.value.forEach(item => {
    ids.push(item.influencerId);
    names.push(item.name);
  });
  router.push(`/writeEmail?ids=${ids.join(',')}&names=${names.join(',')}`);
}

onMounted(() => {
  queryCateList();
  queryCountryList();
});
</script>

<style lang="less" scoped>
.main {
  padding: 24px 16px;
}

.card {
  height: 130px;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
}

.plan-base {
  margin-bottom: 16px;

  .info {
    flex: 1;
    min-width: 660px;
    margin-right: 16px;
    padding-left: 32px;

    p {
      color: #333;

      &.info-time {
        margin-top: 10px;
      }

      &.info-desc {
        margin-top: 4px;
      }
    }


  }

  .blog {
    width: 286px;
    margin-right: 16px;

    p {
      color: #333;
    }
  }

  .accound {
    width: 210px;

    .accound-label {
      color: #333;
    }

    .accound-btn {
      i {
        font-size: 24px;
        color: #bbb;
        margin-left: 5px;
      }
    }
  }
}

.content {
  padding: 16px;
  background: #fff;
  border-radius: 20px;
}

.operate-top {
  margin-bottom: 24px;

  .color-list {
    width: 186px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    p {
      margin-right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 6px;

      &:last-child {
        margin-right: 0;
      }

      i {
        color: #fff;
      }
    }
  }

  .platform-list {
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 0 8px;
    height: 44px;

    div {
      border: 1px solid transparent;
      padding: 0 16px;
      border-radius: 8px;
      height: 32px;

      &.active {
        border: 1px solid rgba(255, 82, 119, .5);
        background: #ffedf1;

        span {
          color: @main-color;
        }
      }

      img {
        width: 17px;
        height: 17px;
        margin-right: 6px;
      }

      span {
        color: #666;
      }
    }
  }

  &::v-deep {
    .el-date-editor {
      flex-grow: 0;
      width: 300px;
      height: 44px;
    }

    .el-select {
      width: 200px;
      height: 44px;
      margin-right: 20px;

      .el-input {
        height: 44px;
      }
    }
  }

  .sort-btn {
    width: 48px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    margin-right: 20px;

    i {
      font-size: 20px;
    }
  }

  .search {
    position: relative;

    &::v-deep .el-input {
      width: 250px;
      height: 44px;
    }

    p {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 44px;
      height: 100%;

      i {
        color: @main-color;
      }
    }
  }
}

.screen {
  padding-bottom: 16px;

  .select-btn {
    min-width: 118px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    padding-left: 12px;
    padding-right: 8px;
    margin-right: 8px;
    border: 1px solid #f2f2f2;
    margin-bottom: 16px;

    &.selected {
      background: #ffedf1;

      span,
      i {
        color: @main-color;
      }
    }

    &.active {
      background: #ffedf1;
      border: 1px solid @main-color;

      span,
      i {
        color: @main-color;
      }
    }

    span {
      color: #333;
    }

    i {
      color: #999;
      font-size: 12px;
    }
  }

  .screen-btns {
    margin-bottom: 16px;

    p {
      width: 64px;
      height: 32px;
      border-radius: 6px;
      text-align: center;
      line-height: 32px;

      &:first-child {
        color: #666;
        background: #f8f8f8;
      }

      &:last-child {
        margin-left: 8px;
        color: #fff;
        background: @main-color;
      }
    }
  }
}

.table {
  .row-name {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 16px;
    }
  }

  .row-img {
    width: 20px;
    height: 20px;
  }

  .row-tags {
    .row-tag {
      height: 24px;
      padding: 0 8px;
      background: hsla(0, 0%, 93%, .4);
      border-radius: 12px;
      border: 1px solid #dcdee0;
      color: #666;
      line-height: 24px;
      margin-right: 8px;
    }
  }

  .row-btn {
    color: @main-color;
  }
}

.pagination {
  margin-top: 20px;

  .selection {
    .left {
      color: #999;

      span {
        color: @main-color;
      }
    }

    .right {
      margin-left: 16px;

      p {
        margin-left: 16px;
        padding: 0 8px;
        height: 32px;
        background: rgba(248, 82, 119, .1);
        border-radius: 10px;
        color: @main-color;
        line-height: 32px;
      }
    }
  }
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}
</style>
